<template>
<!--  templateType 19-全部商品；20-自定义商品 -->
  <view class="h-waterfall">
    <view class="goods-list">
      <x-goods-list :list="goodsList" :componentId="detail.id" ref="goodsList" from="home" :sourcePageId="sourcePageId" :sourcePageType="sourcePageType" :source="source" />
    </view>
  </view>
</template>

<script>
import XGoodsList from '@/components/x-goods-list';
export default {
  name: 'HWaterfall',
  components: { XGoodsList },
  props: {
    detail: {
      type: Object,
      default: () => ({
        componentContentList: []
      })
    },
    storeId: {
      type: [String, Number],
      default: ''
    },
    sourcePageType: {
      type: [String, Object],
      default: '1'
    },
    sourcePageId: {
      type: [String, Object],
      default: ''
    },
    source: {
      type: [String, Object],
      default: 'waterfall'
    }
  },
  data() {
    return {
      // 分页相关
      pagination: {
        more: true,
        loading: false,
        pageNum: 1,
        pageSize: 10
      },
      swiperList: [],
      goodsList: [],
      recommendList: [],
      specialList: [],
      recommendEnd: 0,
      totalCount: 0,
      insertIndex: 1,
      insertSpecialIndex: 1
    };
  },
  computed: {},
  created() {
    if (this.detail?.componentStyle.isBanner) {
      this.detail?.componentContentList.map((item) => {
        item.mainPicHeight = item.contentStyle?.height;
        item.mainPicWidth = item.contentStyle?.width;
      });
      this.swiperList = this.detail.componentContentList || [];
      this.specialList = this.detail.componentContentList || [];
    }
    this.getGuessLikeGoods(); // 猜你喜欢商品
    this.getGoodsList();
  },
  methods: {
    // 获取首页商品数据
    async getGoodsList() {
      if (this.pagination.loading || !this.pagination.more) return false;
      this.pagination.loading = true;
      const params = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize
      };
      if (this.storeId) {
        params.storeId = this.storeId;
      }
      // templateType 19全部商品，20自定义商品
      if (this.detail.templateType === 20) {
        params.componentId = this.detail.id;
      }
      const url = this.detail.templateType === 19 ? '/product/app/spu/list' : '/product/app/component/product';
      this.$http({
        login: true,
        isCancelToken: true,
        url: url,
        data: params,
        report: true
      }).then(res => {
        const goodsList = res.data?.map(item => {
          // console.log(item);
          return {
            model: 'goods',
            ...item
          };
        }) || [];
        this.totalCount += goodsList.length;
        let index = 0;
        if (this.recommendList && this.recommendList.length > 0) {
          while (this.insertIndex * 8 <= this.totalCount) {
            const beforeCount = this.pagination.pageSize * (this.pagination.pageNum - 1);
            goodsList.splice(this.insertIndex * 8 - beforeCount + index, 0, {
              model: 'recommend',
              data: this.recommendList
            });
            this.insertIndex++;
            index++;
          }
        }
        const specialList = {
          model: 'special',
          ...this.specialList[0]
        };
        if (this.specialList) {
          while (this.insertSpecialIndex * 12 <= this.totalCount) {
            const beforeCount = this.pagination.pageSize * (this.pagination.pageNum - 1);
            goodsList.splice(this.insertSpecialIndex * 12 - beforeCount, 0, specialList);
            this.insertSpecialIndex++;
          }
        }
        this.specialList.push(...this.specialList.splice(0, 1));
        if (this.pagination.pageNum === 1 && this.detail?.componentStyle.isBanner) {
          goodsList.unshift({
            model: 'swiper',
            data: this.swiperList
          });
        }
        this.goodsList = goodsList;
        // 触发列表更新
        this.$refs.goodsList.handleList(goodsList);
        this.pagination.more = !!res.data?.length; // 是否还有下一页
        this.pagination.loading = false;
        this.pagination.pageNum = this.pagination.pageNum += 1; // 请求成功后页码直接+1
        uni.stopPullDownRefresh(); // 完成停止加载
      }).catch(() => {
        if (this.pagination.pageNum === 1) {
          this.goodsList = [];
        }
        this.pagination.more = false;
        this.pagination.loading = false;
        uni.stopPullDownRefresh(); // 完成停止加载
      });
    },
    // 获取瀑布流轮播
    async getSwiperList() {
      this.$http({
        login: true,
        isCancelToken: true,
        url: '/marketing/home/page/rotation',
        report: true,
        data: {
          type: 0
        }
      }).then(res => {
        const goodsList = res.data ? res.data.map(item => {
          item.imgUrl = item.imageUrl;
          return {
            ...item
          };
        }) : [];
        this.swiperList = goodsList;
      }).catch(() => {

      });
    },
    // 获取猜你喜欢商品
    async getGuessLikeGoods() {
      const params = {
        pageNum: this.pagination.pageNum,
        pageSize: 4
      };
      this.$http({
        login: true,
        isCancelToken: true,
        url: '/product/app/guess/like',
        report: true,
        data: params
      }).then(res => {
        this.recommendList = res.data || [];
      }).catch(() => {

      });
    },
    // 获取专题商品
    async getRotation() {
      const params = {
        pageNum: this.pagination.pageNum,
        pageSize: 1,
        type: 1
      };
      this.$http({
        login: true,
        isCancelToken: true,
        url: '/marketing/home/page/rotation',
        report: true,
        data: params
      }).then(res => {
        const goodsList = res.data ? res.data[0] : null;
        this.specialList = goodsList;
      }).catch(() => {

      });
    },
    handleReachBottom() {
      this.getGuessLikeGoods();
      this.getGoodsList();
    },
    handleRefresh() {
      this.pagination = {
        more: true,
        loading: false,
        pageNum: 1,
        pageSize: 10
      };
      this.goodsList = null;
      this.totalCount = 0;
      this.insertIndex = 1;
      this.insertSpecialIndex = 1;
      this.$refs.goodsList.refresh();
      this.getGuessLikeGoods();
      this.getGoodsList();
    }
  }
};
</script>

<style lang="scss" scoped>
.h-waterfall{
  padding: 20px 24px;
}
</style>
